<template>
	<view class="address-edit-content">
		<view class="box" v-if="showMap">
			<view class="map">
				<u-input v-model="value" :type="type" :border="border" @click="inputHandle" />
				<map @tap="clickHandle" id="map" :latitude="latitude" :longitude="longitude" :markers="markers"></map>
			</view>
		</view>
		
		<view v-if="showInput">
			<view class="edit-item">
				<text class="tit">姓名</text>
				<input class="uni-input" type="text" placeholder="请输入收件人姓名" maxlength="30" name="name" value="" v-model="formData.consigner" />
			</view>
			<view class="edit-item">
				<text class="tit">手机号</text>
				<input class="uni-input" type="number" placeholder="请输入手机号" maxlength="11" value="" v-model="formData.mobile" />
			</view>
			<!-- <view class="edit-item">
				<text class="tit">固定电话</text>
				<input class="uni-input" type="text" placeholder="固定电话（选填）" maxlength="20" value="" v-model="formData.phone" />
			</view> -->
			<view class="edit-item">
				<text class="tit">地址</text>
				<pick-regions :default-regions="defaultRegions" @getRegions="handleGetRegions">
					<text class="select-address" :class="{ empty: !formData.full_address }">{{ formData.full_address ? formData.full_address : '请选择省市区县' }}</text>
				</pick-regions>
			</view>
			<view class="edit-item">
				<text class="tit">详细地址</text>
				<input class="uni-input" type="text" placeholder="请输入详细地址" maxlength="50" v-model="formData.address" />
			</view>
			
			<view class="edit-item" style="display: flex;justify-content: space-between;">
				<view style="width: 100rpx;"><text class="tit">导航</text></view>
				<view><input class="uni-input" type="text" placeholder="请选择位置"  name="invite"  v-model="formData.invite"  /></view>
				<view class="" @click="daohang()" style="display: flex;">
				
					<view style="width:40rpx;margin: auto 0; ">
						<image src="../../../static/images/daohang.png" mode=""
							style="width:40rpx; height: 40rpx;margin: auto 0; padding-right: 30rpx;"></image>
					</view>
				</view>
			</view>
			<button type="primary" class="add" @click="saveAddress">保存</button>
			<loading-cover v-if="edit_id" ref="loadingCover"></loading-cover>
		</view>

		
		
		
	</view>
</template>

<script>
import http from 'common/js/http.js';
import pickRegions from '@/components/pick-regions/pick-regions.vue';
import loadingCover from '@/components/loading/loading.vue';
import validate from 'common/js/validate.js';
export default {
	components: {
		loadingCover,
		pickRegions
	},
	data() {
		return {
			showInput:true,
			showMap:false,
			weizhiname:'',
			value:  '',
			type: 'text',
			border: true,
			latitude: '',
			longitude: '',
			weizhi:[],
			markers: [{
				latitude: '',
				longitude: '',
				iconPath: '../../../static/images/daohang.png'
			}],
			edit_id: 0,
			formData: {
				consigner: '',
				mobile: '',
				province: '',
				city: '',
				district: '',
				address: '',
				phone: '',
				address_id: '',
				full_address: '',
				invite:'',
			},
			addressValue: '',
			back: '', // 返回页
			redirect: 'redirectTo', // 跳转方式
			flag: false, //防重复标识
			defaultRegions: []
		};
	},
	mixins: [http],
	onHide() {
		this.flag = false;
	},
	onLoad(option) {
		/* 修改头部信息 */
		let title = '新增收货地址';
		if (option.id) {
			this.edit_id = option.id;
			title = '编辑收货地址';
			this.addressID = option.id;
			this.formData.id = option.id;
			this.getAddressDetail();
		}
		if (option.back) this.back = option.back;
		if (option.redirect) this.redirect = option.redirect;
		uni.setNavigationBarTitle({
			title
		});
	},
	created() {
		this.onLoadHadnle();
	},
	onShow() {},
	methods: {
		inputHandle(e) {
			this.frame();
		},
		clickHandle(e) {
			
			this.showMap=false;
			this.showInput=true;
			
			if(this.formData.id){
				this.getAddressDetail();
			}
			console.log('333333', e)
			this.frame();
		},
		onLoadHadnle() {
			uni.getLocation({
				type: 'wgs84',
				success: res => {
					this.longitude = res.longitude;
					this.latitude = res.latitude;
					this.markers[0].latitude = res.latitude;
					this.markers[0].longitude = res.longitude;
					this.markers[0].iconPath = '../../static/imgs/map.png';
				}
			});
		},
		frame() {
			uni.chooseLocation({
				success: res => {
					console.log('res==============', res)
					console.log('res.address==============', res.address)
					console.log('res==============', res.errMsg)
					this.latitude = res.latitude;
					this.longitude = res.longitude;
					this.formData.invite = res.address;
					this.markers[0].latitude = res.latitude;
					this.markers[0].longitude = res.longitude;
					this.markers[0].iconPath = '../../../static/imgs/map.png';
					
				}
			});
	
		},
		daohang(){
			this.showInput=false;
			this.showMap=true
		},
		/* 获取地址信息 */
		getAddressDetail() {
			this.sendRequest({
				url: 'System.Member.addressDetail',
				data: { id: this.formData.id },
				success: res => {
					
					console.log("res============",res)
					if (res.code == 0) {
						console.log("")
						this.formData.consigner = res.data.consigner;
						this.formData.mobile = res.data.mobile;
						this.formData.address = res.data.address;
						this.formData.phone = res.data.phone;
						this.defaultRegions = [res.data.province, res.data.city, res.data.district];
						this.formData.invite=res.data.invite
						if (this.$refs.loadingCover == undefined) return;
						this.$refs.loadingCover.hide();
						console.log("555555555555555555555",this.formData.consigner)
					}
				}
			});
		},
		// 获取选择的地区
		handleGetRegions(regions) {
			this.formData.full_address = '';
			this.formData.full_address += regions[0] != undefined ? regions[0].label : '';
			this.formData.full_address += regions[1] != undefined ? '-' + regions[1].label : '';
			this.formData.full_address += regions[2] != undefined ? '-' + regions[2].label : '';
			this.addressValue = '';
			this.addressValue += regions[0] != undefined ? regions[0].value : '';
			this.addressValue += regions[1] != undefined ? '-' + regions[1].value : '';
			this.addressValue += regions[2] != undefined ? '-' + regions[2].value : '';
			
			
			console.log("this.addressValue===============",this.addressValue)
		},
		saveAddress() {
			
			console.log("this.value============",this.value)
			console.log("this.latitude============",this.latitude)
			console.log("this.longitude============",this.longitude)
			console.log("this.formData.consigner============",this.formData.consigner)
			console.log("this.formData.mobile============",this.formData.mobile)
			if (this.flag) return;
			this.flag = true;
			console.log("this.vertify=================",this.vertify())
			if (this.vertify()) {
				
				console.log("22222222222222222222222222",this.formData.full_address)
				// let addressValueArr = this.formData.full_address.split('-'),
				let addressValueArr = this.addressValue.split('-'),
					parmas = {},
					ajax_url = '';

				if (!this.formData.id) {
					console.log("888888888888888",this.formData)
					parmas = {
						consigner: this.formData.consigner,
						mobile: this.formData.mobile,
						province: addressValueArr[0],
						city: addressValueArr[1],
						district: addressValueArr[2],
						citys: this.formData.full_address,
						address: this.formData.address,
						phone: this.formData.phone,
						invite:this.formData.invite,
						lat: this.latitude,
						long: this.longitude,
					};
					ajax_url = 'addAddress';
				} else {
					console.log("99999999999",this.formData)
					parmas = {
						id: this.formData.id,
						consigner: this.formData.consigner,
						mobile: this.formData.mobile,
						province: addressValueArr[0],
						city: addressValueArr[1],
						district: addressValueArr[2],
						citys: this.formData.full_address,
						address: this.formData.address,
						phone: this.formData.phone,
						invite:this.formData.invite,
						lat: this.latitude,
						long: this.longitude,
						
					};
					
					console.log("修改====================",parmas)
					ajax_url = 'updateAddress';
				}
				this.sendRequest({
					url: 'System.Member.' + ajax_url,
					data: parmas,
					success: res => {
						
						console.log("12222222222222222222",res)
						if (res.code == 0) {
							if (this.back != '') {
								this.$util.redirectTo(this.back, {}, this.redirect);
							} else {
								this.$util.redirectTo('/pages/member/address/address', {}, 'redirectTo');
							}
						} else {
							this.$util.showToast({
								title: res.message
							});
							this.flag = false;
						}
					}
				});
			}
		},
		vertify() {
			var rule = [
				{ name: 'consigner', checkType: 'required', errorMsg: '请输入姓名' },
				{ name: 'mobile', checkType: 'required', errorMsg: '请输入手机号' },
				{ name: 'mobile', checkType: 'phoneno', errorMsg: '请输入正确的手机号' },
				{ name: 'full_address', checkType: 'required', errorMsg: '请选择省市区县' },
				{ name: 'address', checkType: 'required', errorMsg: '详细地址不能为空' },
				{ name: 'invite', checkType: 'required', errorMsg: '请选择位置' },
			];
			var checkRes = validate.check(this.formData, rule);
			if (checkRes) {
				return true;
			} else {
				this.$util.showToast({ title: validate.error });
				this.flag = false;
				return false;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
	
	.box {
		height: 100vh;
	
		.map {
			width: 100%;
			height: 100%;
	
			map {
				width: 100%;
				height: 100%;
			}
		}
	}
.edit-item {
	display: flex;
	align-items: center;
	padding: 0 30rpx;
	height: 100rpx;
	background-color: #fff;
	.tit {
		width: 120rpx;
		font-size: $uni-font-size-lg - 2rpx;
	}
	.select-address {
		display: inline-block;
		font-size: $ns-font-size-base;
		margin-left: 20rpx;
		&.empty {
			color: #808080;
			padding: 0;
		}
	}
	input {
		flex: 1;
		font-size: $uni-font-size-lg - 2rpx;
		margin-left: 20rpx;
		padding: 0;
	}
	&:first-of-type {
		margin-top: $uni-spacing-row-base;
	}
}
.address-edit-content > .edit-item + .edit-item {
	border-top: 2rpx solid $ns-border-color-gray;
}
.add {
	margin: 60rpx 30rpx 0;
}
</style>
